<template>
  <div class="menu">
    <!-- 顶部导航 -->
    <div class="nav">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="search"
      />
    </div>
    <div class="content">
      <!-- 侧边导航 -->
      <div class="content-left">
        <ul>
          <li
            :class="{ active: index == i }"
            v-for="(item, index) in coffeelist"
            :key="index"
            @click="getcoffeeType(index, item.type)"
          >
            {{ item.typeDesc }}
          </li>
        </ul>
      </div>
      <!-- 右侧图文信息 -->
      <div class="content-right">
        <div class="content-right-show" v-if="isshow">
          <div
            class="content-right-item"
            v-for="(item, index) in productlist"
            :key="index"
            @click="viewpid(item.pid)"
          >
            <product :prolist="item"></product>
          </div>
        </div>
        <!-- 显示搜索失败 -->
        <div class="bai" v-else-if="!isshow">查无此商品</div>
      </div>
    </div>
  </div>
</template>
<script>
import Product from "../components/Product";
export default {
  name: "Menu",
  data() {
    return {
      value: "",
      // 记录左右商品类型数据
      coffeelist: [],
      // 记录左侧类型的索引值
      i: 0,
      // 记录右侧商品数据
      productlist: [],
      isshow:true
    };
  },
  components: {
    Product,
  },
  methods: {
    // 获取左边的商品类型
    getType() {
      this.axios({
        method: "get",
        url: "/type",
        // get请求数据用params字段，post请求数据用data字段
        params: {},
      })
        .then((res) => {
          if (res.data.code == 400) {
            // 将热卖推荐类型加入左侧商品类型
            res.data.result.unshift({ type: "isHot", typeDesc: "热卖推荐" });
            this.coffeelist = res.data.result;
            this.getProductByType(res.data.result[this.i].type);
          }
        })
        .catch((err) => {
          
        });
    },
    // 根据商品的类型获取商品数据
    getProductByType(type) {
      let key = "";
      let value = "";
      if (type == "isHot") {
        key = "isHot";
        value = 1;
      } else {
        key = "type";
        value = type;
      }
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key,
          value,
        },
      })
        .then((res) => {
          if (res.data.code == 500) {
            this.productlist = res.data.result;

          }
        })
        .catch((err) => {
          
        });
    },
    // 点击高亮
    getcoffeeType(index, type) {
      if (this.i == index) return;
      this.i = index;
      this.getProductByType(type);
    },
    // 点击传递pid
    viewpid(pid) {
      this.$router.push({ name: "Detail", params: { pid } });
    },
    // 搜索商品
    search() {
      this.axios({
        method: "get",
        url: "/search",
        params: {
          name: this.value,
        },
      })
        .then((res) => {
          if (res.data.code == "Q001") {
            if (res.data.result != 0) {
              this.productlist = res.data.result;
              this.isshow=true;
            } else {
              this.isshow=false;
            }
          } else {
            this.getProductByType("isHot");
          }
        })
        .catch((err) => {
          
        });
    },
  },
  created() {
    this.getType();
  },
};
</script>
<style lang="less" scoped>
.nav {
  position: sticky;
  top: 0;
  left: 0;
}
.content {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 50px;
  display: flex;
  .content-left {
    width: 80px;
    height: 100%;
    font-size: 14px;
    overflow: auto;
    ul {
      list-style: none;
      li {
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      li.active {
        color: #0c34ba;
        font-weight: bolder;
      }
    }
  }
  .content-right {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
    .content-right-show {
      display: flex;
      flex-wrap: wrap;
      .content-right-item {
        width: calc(~"50% - 5px");
        margin-right: 10px;
        margin-bottom: 10px;
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    .bai {
      font-size: 20px;
      color: #0c34ba;
      position: fixed;
      top: 50%;
      left: 50%;
      font-family: 'Times New Roman', Times, serif;
    }
  }
}
</style>